<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<title>商品规格弹框</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			
			.r-line {
				width: 687px;
				height: 452px;
				margin: 0 auto;
				background: white;
				position: absolute;
				left: 32%;
				top: 30%;
				border: 5px solid rgb(219, 219, 219);
				z-index: 2;
			}
			
			.r-opacity1 {
				width: 100%;
				height: 100%;
				background: rgba(83, 83, 83, 0.3);
				position: fixed;
				left: 0;
				top: 0;
				display: none;
			}
			
			.r-li1 {
				width: 687px;
				height: 68px;
				line-height: 68px;
				color: #498e3d;
				font-size: 18px;
				padding-left: 30px;
				box-sizing: border-box;
				border-bottom: 1px solid rgb(219, 219, 219);
			}
			
			.r-two-price {
				margin: 30px 0;
				padding-left: 41px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
			}
			
			.r-two-price p:nth-child(1) {
				font-size: 30px;
				color: #ff5757;
				margin-right: 28px;
			}
			
			.r-two-price p:nth-child(2) {
				font-size: 18px;
				color: #666;
				text-decoration: line-through;
				padding-top: 12px;
				box-sizing: border-box
			}
			
			.r-two-p1 {
				width: 403px;
				display: flex;
				flex-direction: row;
				justify-content: space-between
			}
			
			.r-two-p2 {
				width: 298px;
				margin: 20px 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between
			}
			
			.r-two-middle1 a {
				display: inline-block;
				width: 80px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				border: 1px solid #f1f1f1;
				color: #666;
				font-size: 14px;
				cursor: pointer;
			}
			
			.r-two-middle1 span {
				padding-top: 5px;
				font-size: 18px;
				color: #666;
			}
			
			.r-two-middle1 {
				padding-left: 41px;
				box-sizing: border-box;
			}
			/*数量加减*/
			
			.r-two-math {
				width: 250px;
				position: relative;
				padding-top: 15px;
				box-sizing: border-box
			}
			
			.r-two-math button {
				width: 34px;
				height: 35px;
				border: none;
				font-size: 18px;
				color: #666;
				outline: 0;
				background: #efefef
			}
			
			.r-two-math button:nth-of-type(1) {
				border-right: 1px solid #c9c9c9
			}
			
			.r-two-math button:nth-of-type(2) {
				border-left: 1px solid #c9c9c9
			}
			
			.r-two-math input {
				width: 57.35px;
				height: 30px;
				border: none;
				outline: 0;
				text-align: center
			}
			
			.r-two-math span:nth-child(2) {
				display: inline-block;
				/*width: 136px;*/
				height: 35px;
				border: 1px solid #c9c9c9;
				margin-left: 20px
			}
			
			.r-two-span1 {
				font-size: 18px;
				color: #666
			}
			
			.r-two-button button {
				width: 150px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				border-radius: 5px;
				outline: 0;
				border: none;
				color: #fff;
				font-size: 20px;
				cursor: pointer
			}
			
			.r-two-button {
				height: 30px;
				padding-top: 15px;
				box-sizing: border-box
			}
			
			.r-two-div1 {
				/*margin-top: 23px;*/
				display: flex;
				flex-direction: row;
				padding-left: 41px;
				box-sizing: border-box;
			}
			
			.r-two-write2 {
				background: #f2ffef;
				border: 1px solid #87bb7d!important;
			}
			
			.r-add {
				width: 191px;
				height: 35px;
				background: rgb(234, 110, 6);
				border-radius: 4px;
				margin-left: 41px;
				box-sizing: border-box;
				margin-top: 37px;
				font-size: 18px;
				color: #fff;
				line-height: 35px;
				text-align: center;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="r-opacity1">
			<ul class="r-line">
				<li class="r-li1">请选择产品规格</li>
				<li class="r-two-price">

					<p>现价&nbsp;:&nbsp;¥<span>20.0</span></p>

					<p>原价&nbsp;:&nbsp;¥<span>40.0</span></p>
				</li>
				<li class="r-two-middle1">
					<p class="r-two-p1">
						<span>请选择规格</span>
						<a>500g</a>
						<a>1000g</a>
						<a>2000g</a>
					</p>
				</li>
				<!--数量加减-->
				<li class="r-two-div1">
					<div class="r-two-math">
						<span class="r-two-span1">数量:</span>
						<span>
			<button>-</button>
			<input type="text"  class="r-two-input" value="1"/>
			<button>+</button>
			</span>
					</div>
				</li>
				<!--添加到购物车-->
				<li class="r-add">
					添加到购物车
				</li>
			</ul>
		</div>
	</body>

</html>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	//box弹窗,选择商品规格的弹框
	//购物车加减数量
	var i = 1;
	//点击减号
	$(".r-two-math button").eq(0).click(function() {
		console.log(222);
		if(i == 1) return;
		$(".r-two-input").val(--i);
	});
	//点击加号
	$(".r-two-math button").eq(1).click(function() {
		console.log(111);
		$(".r-two-input").val(++i);
	});
	$(".r-two-middle1 a").each(function(inde, ele) {
		$(ele).click(function() {
			$(".r-two-middle1 a").removeClass("r-two-write2");
			$(".r-two-middle1 a").eq(inde).addClass("r-two-write2");
		})
	})
	//点击添加到购物车
	$(".r-add").click(function() {
		carVal++;
		$(carCar).html(carVal);
		$(".r-opacity1").hide();
	})

	//		if(boxFlag==true){
	//			console.log(41121221);
	//			$(".r-opacity1").show();
	//		}else{
	//			$(".r-opacity1").hide();
	//		}
</script>